<script setup lang="ts">
// 'https://img1.baidu.com/it/u=621421759,3943251443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658595600&t=e0687c5655c8ce6f65f8a3d92c7addf9'
// 监听滚动的距离是否大于等于某个临界值  动态的给图片设置src属性
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref } from 'vue'
const target = ref<null | HTMLImageElement>(null)
// onMounted(() => {
//   console.log(target.value) // dom元素
// })
// useIntersectionObserver(dom元素, ()=> {回调函数中可以判定是否元素进入了可视区})
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // console.log(isIntersecting) // 如果dom元素到了可视区 就是true, 出了可视区就是 false
  if (isIntersecting) {
    console.log(123)
    //图片标签到了可视区 再给src赋值
    target.value!.src = 'https://img1.baidu.com/it/u=621421759,3943251443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658595600&t=e0687c5655c8ce6f65f8a3d92c7addf9'
    stop() // 只要进入了可视区， 图片赋值了src后 就拆除监听滚动
  }
})
</script>
<template>
  <div class="box"></div>
  <img ref="target" src="" alt="">
</template>



<style scoped>
.box {
  height: 3000px;
  background-color: red;
}
</style>